<script setup>
import { reactive } from 'vue'
import ListItem from "@/components/listItem.vue";
import {list, modify} from "@/api/task";
import {onShow, onLoad} from "@dcloudio/uni-app";

const dict = uni.getStorageSync('dict')
const pageData = reactive({
  activeTab: 0,
  loading: false,
  listData: [],
  queryListParams: {
    pageNum: 1,
    pageSize: 10
  },
  total: 0
})
const lower = (e) => {
  if(pageData.listData.length >= pageData.total) return
  pageData.queryListParams.pageNum++
  getList()
}
const onRefresh = (e) => {
  pageData.queryListParams.pageNum = 1
  pageData.listData = []
  getList()
}
const handleDetail = (i) => {
  console.log('gogo', i)
  uni.setStorage({
    key: 'checkDetail',
    data: i,
    success: () => {
      uni.navigateTo({
        url: '/pages/tasks/detail?id=' + i.id
      })
    }
  })
}
const handleAdd = () => {
  uni.removeStorage({
    key: 'checkDetail',
    success: () => {
      uni.navigateTo({
        url: '/pages/storeInspection/detail'
      })
    }
  })
}
const changeTab = (v) => {
  console.log('v', v)
  switch (v.paneKey) {
    case '0':
      pageData.queryListParams.pageNum = 1
      pageData.queryListParams.status = undefined
      break
    case '1':
      pageData.queryListParams.pageNum = 1
      pageData.queryListParams.status = 0
      break
    case '2':
      pageData.queryListParams.pageNum = 1
      pageData.queryListParams.status = 1
      break
    case '3':
      pageData.queryListParams.pageNum = 1
      pageData.queryListParams.status = 0
      break
    default:
      console.log('未定义tab')
  }
  pageData.listData = []
  getList()
}
const getList = () => {
  pageData.loading = true
  list(pageData.queryListParams).then(res => {
    console.log(res)
    pageData.listData = [
      ...pageData.listData,
      ...res.rows
    ]
    pageData.total = res.total
    pageData.loading = false
  })
}
onShow(() => {
  pageData.listData = []
  getList()
})
onLoad((query) => {
  console.log('query', query)
  if(query.deptId) {
    pageData.queryListParams.respDeptid = query.deptId
  }
  if(query.name) {
    pageData.queryListParams.name = query.name
  }
})
</script>

<template>
  <nut-tabs v-model="pageData.activeTab" @click="changeTab">
    <nut-tab-pane title="全部" />
    <nut-tab-pane title="进行中" />
    <nut-tab-pane title="已完成" />
  </nut-tabs>
  <scroll-view v-if="pageData.loading === false && pageData.listData.length" :scroll-top="0" :scroll-y="true" :refresher-enabled="true" :refresher-triggered="pageData.loading" class="list-body" @scrolltolower="lower" @refresherrefresh="onRefresh">
    <list-item v-for="(item, index) in pageData.listData" :key="item.id" :desc="item.safeResp" @click="handleDetail(item)">
      <template v-slot:left>
        {{ item.name }}
      </template>
      <template v-slot:right>
        <nut-tag :type="dict.task_status[item.status]?.type">{{ dict.task_status[item.status]?.text }}</nut-tag>
      </template>
    </list-item>
  </scroll-view>
  <nut-empty v-if="pageData.loading === false && !pageData.listData.length" image="empty" description="无内容"></nut-empty>
  <view v-if="pageData.loading === true" class="loading-box">
    <nut-icon name="loading"></nut-icon>
  </view>
</template>

<style scoped lang="scss">
.list-body{padding: 10px 0 40px;box-sizing:border-box;height: calc(100vh - 40px);}
.btn{position: fixed;bottom: 20px;width: 100%;padding: 0 40px;box-sizing: border-box;}
</style>
<style>
.nut-tab-pane{display: none!important;}
.nut-list-item{height: auto!important;}
</style>
